<h2 style="margin-top:30px;">{{ str.application_workplaces }} <span>{{ str.application_workplaces_desc }}</span></h2>

<div class="table">
    {% for s in workplaces|dictsort:"start" %}
    <div class="table_row" alt="{{ q.key }}">
        <div class="table_cell" style="white-space:nowrap;">
            {% if application_readonly %}
            {{ s.organisation|default:"" }}
            {% else %}
            <input type="text" class="autosave_workplace" name="organisation" value="{{ s.organisation|default:"" }}" alt="{{ s.key }}" placeholder="{{ str.workplace_name }}" maxlength="500" style="width:200px;" />
            {% endif %}
        </div>
        <div class="table_cell" style="white-space:nowrap;">
            {% if application_readonly %}
            {{ s.start|default:"" }} - {{ s.end|default:"" }}
            {% else %}
            <input type="text" class="autosave_workplace" name="start" value="{{ s.start|default:"" }}" placeholder="{{ str.start_date }}" maxlength="500" style="width:100px;" /> -
            <input type="text" class="autosave_workplace" name="end" value="{{ s.end|default:"" }}" placeholder="{{ str.end_date }}" maxlength="500" style="width:100px;" />
            {% endif %}
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {{ s.description|default:"" }}
            {% else %}
            <input type="text" class="autosave_workplace" name="description" value="{{ s.description|default:"" }}" placeholder="{{ str.additional_info }}" maxlength="500" style="width:410px;" />
            {% endif %}
        </div>
    </div>
    {% endfor %}
    {% if application_readonly %}{% else %}
    <div id="new_workplace" class="table_row" alt="{{ q.key }}">
        <div class="table_cell">
            <input type="text" class="autosave_workplace new_workplace" name="organisation" placeholder="{{ str.workplace_name }}" maxlength="500" style="width:200px;">
        </div>
        <div class="table_cell">
            <input type="text" class="autosave_workplace new_workplace" name="start" placeholder="{{ str.start_date }}" maxlength="500" style="width:100px;"> -
            <input type="text" class="autosave_workplace new_workplace" name="end" placeholder="{{ str.end_date }}" maxlength="500" style="width:100px;">
        </div>
        <div class="table_cell" style="">
            <input type="text" class="autosave_workplace new_workplace" name="description" placeholder="{{ str.additional_info }}" maxlength="500" style="width:410px;">
        </div>
    </div>
    {% endif %}
</div>

{% if application_readonly %}{% else %}
<script>
    $(document).ready(function(){
        $('.new_workplace').keypress(function() {
            var newworkplace = $('#new_workplace').clone(true);
            newworkplace.find('input').attr('alt', '');
            newworkplace.find('input').val('');

            $('.new_workplace').unbind('keypress');
            $('.new_workplace').removeClass('new_workplace');

            newworkplace.find('input').addClass('new_workplace');
            $('#new_workplace').after(newworkplace);
            $('#new_workplace').attr('id', '');
        });

        $('.autosave_workplace').change(function() {
            var input = $(this);
            autoSave(input, '{{ post_url }}/cv', {
                type: 'workplace',
                key: input.parent().parent().find('input[alt!=""]').attr('alt')
            });
        });
    });
</script>
{% endif %}